<template>
  <div>
    <div>
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="服务订单"
        @click-left="back"
      >
        <template #left>
          <van-icon name="arrow-left" size="16px" color="#333" />
        </template>
      </van-nav-bar>
    </div>
    <div class="tab">
      <div @click="change1" :class="cur == 0 ? 'active' : ''">积分订单</div>
      <div @click="change2" :class="cur == 1 ? 'active' : ''">
        租房定制需求单
      </div>
    </div>
    <div class="slot"></div>
    <div class="orderlist">
      <div
        class="order"
        @click="goIntegralDetail(item.id)"
        v-for="(item, index) in integralOrderInfo"
        :key="index"
      >
        <van-image
          width="121px"
          height="112px"
          lazy-load
          :src="item.room_image"
          fit="cover"
          radius="5px"
        />
        <!-- <img :src="item.room_image" alt="" /> -->
        <div>
          <div>
            <span>订单编号</span>
            <span>{{ item.order_no ? item.order_no : "" }}</span>
          </div>
          <div>
            <span>房源编号</span>
            <span>{{ item.house_sn }}</span>
          </div>
          <div>
            <span>订单名称</span>
            <span>{{ item.description }}</span>
          </div>
          <div>
            <span>下单时间：</span>
            <span>{{ item.create_time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="demand" v-for="(item, index) in demandList" :key="index">
      <img
        src="@/assets/fang3.png"
        width="35%"
        style="border-radius: 5px; margin-right: 2.6vw"
      />
      <div>
        <div>
          <span>订单名称：</span>
          <span>租房定制需求单</span>
        </div>
        <div>
          <span>城市区域：</span>
          <span>{{ item.city }}</span>
        </div>
        <div>整租 | 1居室 | {{ item.min_price }}~{{ item.max_price }}</div>
        <div
          v-show="item.status == 3 || item.status == 7"
          @click="gophone(item.agent_mobile)"
          style="line-height: 16.09px"
        >
          <span style="font-size: 12px; color: #999">经纪人:</span>
          <span>{{ item.agent_name }} </span>
          <span>{{ item.agent_mobile }}</span>
          <van-icon
            name="phone-o"
            color="#45b7cb"
            style="margin-left: 5px; vertical-align: top"
          />
        </div>
        <div>
          <span v-if="item.status == 5 || item.status == 1 || item.status == 6"
            >等待匹配经纪人</span
          >
          <span v-if="item.status == 2">进行中</span>
          <span v-if="item.status == 3">等待反馈</span>
          <span v-if="item.status == 7">服务完成</span>
          <van-button
            v-if="item.status == 3"
            @click="goEvaluate(item.trustId)"
            style="
              height: 20px;
              font-size: 12px;
              border-radius: 20px;
              border: none;
              padding: 0 15px;
              color: #45b7cb;
              border: 1px solid #45b7cb;
              transform: translateY(-5px);
              margin-left: 3px;
            "
            >评价</van-button
          >
        </div>
      </div>
    </div>
    <div class="nohouse" v-show="integralOrderInfo.length == 0 && cur == 0">
      <img src="../../assets/nohouse.png" alt="" />
      <div>暂无更多积分订单</div>
    </div>
    <div class="nohouse" v-show="demandList.length == 0 && cur == 1">
      <img src="../../assets/nohouse.png" alt="" />
      <div>选择[急需找房]标签可形成定制服务单</div>
    </div>
    <van-overlay :show="show" class="zhe">
      <img src="@/assets/loudou.gif" alt="" width="50px" />
    </van-overlay>
  </div>
</template>

<script>
import { integralOrderList } from "@/apis/integral";
import { buyOrderList } from "../../apis/user";

export default {
  created() {
    this.getIntegral();
  },
  data() {
    return {
      integralOrderInfo: [],
      demandList: [],
      loading: true,
      currentPage: 1,
      show: true,
      cur: 0,
    };
  },
  beforeUpdate() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    gophone(phone) {
      window.location.href = `tel:${phone}`;
    },
    goEvaluate(id) {
      this.$router.push({ path: "/OwnerEvaluate", query: { trustId: id } });
    },
    change1() {
      this.cur = 0;
      this.currentPage = 1;
      this.loading = true;
      this.integralOrderInfo = [];
      this.demandList = [];
      this.getIntegral();
    },
    change2() {
      this.cur = 1;
      this.currentPage = 1;
      this.loading = true;
      this.integralOrderInfo = [];
      this.demandList = [];
      this.getDemand();
    },
    getIntegral() {
      integralOrderList({
        serveCate: 2,
        currentPage: this.currentPage,
      }).then((res) => {
        console.log(res);
        if (res.code == 201 || res.code == 200) {
          this.show = false;
          this.integralOrderInfo = res.result.list;
        }
      });
    },
    getDemand() {
      buyOrderList({
        currentPage: this.currentPage,
        perPage: 10,
        serviceType: 10,
      }).then((res) => {
        console.log("租房需求", res);
        if (res.code == 200 || res.code == 201) {
          this.demandList = this.demandList.concat(res.result.list);
        }
      });
    },
    showScroll() {
      const _this = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && _this.loading) {
        _this.currentPage++;
        if (this.cur == 0) {
          integralOrderList({
            serveCate: 2,
            currentPage: _this.currentPage,
          }).then((res) => {
            console.log(res);
            if (res.code == 201 || res.code == 200) {
              if (res.result.list.length != 10) {
                _this.loading = false;
              }
              _this.integralOrderInfo = [
                ..._this.integralOrderInfo,
                ...res.result.list,
              ];
            }
          });
        } else {
          this.getDemand();
        }
      }
    },
    back() {
      this.$router.go(-1);
    },
    goIntegralDetail(e) {
      this.$router.push({
        path: "/PointsOrderDetails",
        query: { id: e },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.demand {
  margin: 20px 15px;
  display: flex;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > div:nth-child(3) {
      color: #999;
    }
    & > div:nth-child(5) {
      font-weight: bold;
      font-size: 16px;
      color: #d43b33;
    }
    & > div {
      font-size: 14px;
    }
  }
}
.slot {
  height: 30px;
}
.tab {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  position: fixed;
  top: 40px;
  z-index: 1000;
  width: 100vw;
  background-color: #fff;
  .active {
    border-bottom: 2px solid #d43b33;
  }
  & > div {
    padding: 10px 0;
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 100px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
.zhe {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.orderlist {
  margin: 0 15px;
  .order {
    display: flex;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    justify-content: space-around;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div {
        display: flex;
        justify-content: space-between;
        & > span:nth-child(2) {
          font-weight: bold;
        }
      }
    }
  }
}
</style>